<template>
  <div class="applet">
    <!-- 创建小程序 -->
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="left"
      label-width="100px"
      class="demo-ruleForm"
    >
      <ul class="tip">
        <li>所有上传图片均要保证边框完整，图像清晰，光线均匀。</li>
        <li>小程序头像要求正方形</li>
      </ul>
      <el-form-item label="软件账号" size="small" prop="reg_accountno">
        <el-input size="medium" v-model="form.reg_accountno" placeholder="请输入软件注册的账号"></el-input>
      </el-form-item>
      <el-form-item label="法人微信号" size="small" prop="reg_wechatno">
        <el-input size="medium" v-model="form.reg_wechatno" placeholder="请输入法人微信号"></el-input>
      </el-form-item>
      <el-form-item label="法人姓名" size="small" prop="reg_name">
        <el-input size="medium" v-model="form.reg_name" placeholder="请输入法人姓名"></el-input>
      </el-form-item>
      <el-form-item label="客服电话" size="small" prop="reg_phoneno">
        <el-input size="medium" v-model="form.reg_phoneno" placeholder="请输入客服电话" clearable></el-input>
      </el-form-item>
      <el-form-item label="小程序头像" size="small" prop="reg_doc.head_img" class="avatar">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :show-file-list="false"
          :data="{userId,uploadFileType: 'applet',isCompress:'false'}"
          :on-success="handleAvatarSuccess1"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="head_img" :src="head_img" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="小程序类别" size="small" prop="reg_category" class="card">
        <el-select size="medium" v-model="form.reg_category" placeholder="请选择小程序类别">
          <el-option
            v-for="(item, index) in reg_categoryArr"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="小程序名称" size="small" prop="reg_wxapp_name">
        <el-input size="medium" v-model="form.reg_wxapp_name" placeholder="请输入小程序名称"></el-input>
      </el-form-item>
      <el-form-item label="小程序简介" size="small" prop="reg_wxapp_sign">
        <el-input
          size="medium"
          v-model="form.reg_wxapp_sign"
          placeholder="请输入小程序简介(最多50字)"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="小程序类目" size="small" prop="reg_category2">
        <el-cascader :options="appletCate" @change="handleChange" clearable></el-cascader>
        <div
          class="qualify"
          v-for="(item, index) in appletCate"
          :key="index"
          v-if="form.reg_category1 == item.value"
        >
          <span
            v-for="(subitem, subindex) in item.children"
            :key="subindex"
            v-if="form.reg_category2 == subitem.value"
          >{{subitem.value == form.reg_category2 ? subitem.qualify : ''}}</span>
        </div>
      </el-form-item>
      <el-form-item label="身份证正面" size="small" prop="reg_doc.id_card" class="card">
        <el-upload
          ref="upload"
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'applet',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="id_card" :src="id_card" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证反面" size="small" prop="reg_doc.id_card1" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'applet',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess3"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="id_card1" :src="id_card1" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="营业执照" size="small" prop="reg_doc.license" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'applet',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess4"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="license" :src="license" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="资质证书" size="small" prop="reg_doc.other_img" class="card">
        <el-upload
          class="avatar-uploader"
          action="https://res.decerp.cc/api/UploadImg/CommonImg"
          :data="{userId,uploadFileType: 'applet',isCompress:'false'}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess5"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="other_img" :src="other_img" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item size="large">
        <el-button
          style="margin-left: 15%;padding: 8px 30px"
          type="primary"
          @click="onSubmit('form')"
        >确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from "vuex"; //注册state
export default {
  inject: ["reload"],
  data() {
    return {
      // 数据
      form: {
        reg_accountno: "",
        reg_wechatno: "",
        reg_name: "",
        reg_phoneno: "",
        reg_wxapp_name: "",
        reg_category: "",
        reg_wxapp_sign: "",
        reg_category1: "",
        reg_category2: "",
        reg_doc: {
          head_img: "",
          id_card: "",
          id_card1: "",
          license: "",
          other_img: ""
        },
        distributor_id: ""
      },
      reg_categoryArr: [
        { id: 0, name: "微商城" },
        { id: 1, name: "扫码点餐" },
        { id: 2, name: "扫码购" }
      ],
      appletCate: [],
      categoryTip: [],
      rules: {
        reg_accountno: [{ required: true, message: "请输入软件注册的账户" }],
        reg_wechatno: [{ required: true, message: "请输入法人微信号" }],
        reg_name: [{ required: true, message: "请输入法人姓名" }],
        reg_phoneno: [{ required: true, message: "请输入客服电话" }],
        reg_wxapp_name: [{ required: true, message: "请输入小程序名称" }],
        reg_category: [{ required: true, message: "请输入小程序类别" }],
        reg_wxapp_sign: [{ required: true, message: "请输入小程序简介" }],
        reg_category2: [{ required: true, message: "请选择小程序类目" }],
        reg_doc: {
          head_img: [{ required: true, message: "请上传小程序头像" }],
          id_card: [{ required: true, message: "请上传身份证正面照" }],
          id_card1: [{ required: true, message: "请上传身份证反面照" }],
          license: [{ required: true, message: "请上传营业执照" }],
          other_img: [{ required: true, message: "请上传资质证书" }]
        }
      },
      head_img: "",
      id_card: "",
      id_card1: "",
      license: "",
      other_img: "",
      // 身份令牌
      myToken: ""
    };
  },
  computed: {
    // 引入权限页面
    ...mapState(["userId"]),
    ...mapState(["payEnable"])
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      this.appletCate = this.utils.cetegories;
    },
    handleChange(value) {
      this.form.reg_category1 = value[0];
      this.form.reg_category2 = value[1];
    },
    // 小程序头像
    handleAvatarSuccess1(res, file) {
      this.head_img = URL.createObjectURL(file.raw);
      this.form.reg_doc.head_img = res.values;
    },
    // 身份证正面
    handleAvatarSuccess2(res, file) {
      this.id_card = URL.createObjectURL(file.raw);
      this.form.reg_doc.id_card = res.values;
    },
    // 身份证反面
    handleAvatarSuccess3(res, file) {
      this.id_card1 = URL.createObjectURL(file.raw);
      this.form.reg_doc.id_card1 = res.values;
    },
    // 营业执照
    handleAvatarSuccess4(res, file) {
      this.license = URL.createObjectURL(file.raw);
      this.form.reg_doc.license = res.values;
    },
    // 资质证书
    handleAvatarSuccess5(res, file) {
      this.other_img = URL.createObjectURL(file.raw);
      this.form.reg_doc.other_img = res.values;
    },
    beforeAvatarUpload(file) {
      // 对上传的图片格式和大小进行限制
      // const isJPG = file.type === "image/jpeg";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      // if (!isLt2M) {
      //   this.$message.error("上传头像图片大小不能超过 2MB!");
      // }
      // return isJPG && isLt2M;
    },
    // 提交表单
    onSubmit(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          // 提交数据
          this.form.distributor_id = this.userId;
          this.form.reg_doc = JSON.stringify(this.form.reg_doc);
          this.$api
            .submitAppletInformation(this.form, this.myToken)
            .then(res => {
              const { succeed, errmsg } = res;
              if (succeed) {
                this.$message({
                  message: "提交成功",
                  type: "success"
                });
                this.$router.replace("/admin/schedule/appApplication");
              } else {
                this.$message.error(errmsg);
                this.reload();
              }
            });
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.applet {
  .tip {
    font-size: 14px;
    color: #f00;
    padding: 0 20px 20px;
    li {
      list-style: decimal;
      span {
        color: blue;
      }
    }
  }
  .qualify {
    font-size: 12px;
    color: #f00;
  }
}
.applet @{deep} .demo-ruleForm {
  background-color: #fff;
  padding: 30px 30%;
  box-sizing: border-box;
}
// 修改输入框样式
.applet @{deep} .el-input {
  width: 500px;
}
// 表单样式
.applet @{deep} .el-form {
  padding: 30px 25%;
  box-sizing: border-box;
}
// 输入框的宽度
.applet @{deep} .el-input__inner {
  width: 500px;
}
.adressOpation @{deep} .el-input__inner {
  width: 95px;
}
.avatar-uploader {
  .el-upload {
    display: inline-block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    box-sizing: border-box;
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border: 1px dashed #dcdfe6;
    &:hover {
      border-color: #409eff;
    }
  }
}
.avatar {
  display: inline-block;
  margin-right: 35px;
  @{deep} .el-form-item__label {
    line-height: 80px;
  }
  .avatar-uploader {
    img {
      width: 80px;
      height: 80px;
    }
  }
}
.card {
  display: inline-block;
  margin-right: 35px;
  @{deep} .el-input {
    width: 280px;
  }
  @{deep} .el-input__inner {
    width: 280px;
  }
  .avatar-uploader {
    img {
      width: 180px;
      height: 80px;
    }
    .avatar-uploader-icon {
      border-radius: unset;
      width: 180px;
    }
  }
}
</style>